<template>
  <div class="container">
    <div class="search-box">
      <el-cascader
        style="margin-left: 30px"
        placeholder="请选择课程/作业信息"
        v-model="course_assignment_value"
        :options="course_assignment_list"
        @change="handleChange"
      ></el-cascader>
      <div class="acatar">
        <UserAcatar @transfer="change" />
      </div>
    </div>

    <div class="content" v-loading="loading" element-loading-text="拼命加载中">
      <div class="item">
        <el-card
          style="width: 300px; margin: 20px"
          v-for="item in assignment_list"
          :key="item.id"
          :body-style="{ padding: '0px' }"
          shadow="hover"
        >
          <div
            @click="
              assignmentDecs(item.assignment_id, item.course_id, 'uncorrected')
            "
            class="assignmentInfor"
            slot="header"
          >
            <div>
              <span style="font-weight: 700; color: #fcc307">{{
                item.assignment_title
              }}</span
              ><span style="color: #909399">({{ item.course_name }})</span>
            </div>
            <!-- <el-tag>{{item.course_name}}</el-tag> -->
            <div style="color: #12aa9c">
              <span style="color: #fed71a" v-if="typeof item.score === 'number'"
                >{{ item.score }}/</span
              >
              <span
                v-if="item.submit_status === 'unpublish'"
                style="color: #de1c31"
                >0/</span
              >
              <span>{{ item.total_points }}</span>
              <span style="font-size: 12px">分</span>
            </div>
          </div>
          <div class="studentInfo">
            <div style="display: flex; align-items: center">
              <el-avatar
                style="margin-right: 10px"
                :size="30"
                :src="circleUrl"
              ></el-avatar>
              <span>***</span>
            </div>
            <div>
              <el-tag type="danger" v-if="item.submit_status !== 'published'"
                >未提交</el-tag
              >
              <el-tag type="success" v-if="item.submit_status == 'published'">{{
                item.submit_time
              }}</el-tag>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div style="padding: 14px">
            <div class="bottom clearfix">
              <el-button
                v-if="item.status === 'reviewed'"
                @click="editCorrection(item)"
                class="button"
                type="text"
                >修改批改结果</el-button
              >
              <el-button
                v-if="item.submit_status == 'published' && !item.status"
                @click="correctClick(item)"
                type="text"
                class="button"
                >点击批改作业</el-button
              >
            </div>
          </div>
        </el-card>
      </div>
      <div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.pageNum"
          :limit.sync="listQuery.pageSize"
          :pageSizes="[6]"
          @pagination="pageChange"
        />
      </div>
    </div>
  </div>

  <!-- <div class="a1">
      <div class="submitRate">
        <div id="chart1" style="width: 100%; height: 100%"></div>
      </div>
      <div class="submitRate">
        <div id="chart2" style="width: 100%; height: 100%"></div>
      </div>
      <div class="submitRate">
        <div id="chart3" style="width: 100%; height: 100%"></div>
      </div>
    </div> -->
</template>

<script>
import * as echarts from "echarts";
import UserAcatar from "@/components/UserAcatar.vue";
import store from "@/store/index";
import Pagination from "@/components/Pagination";
export default {
  name: "corrent",
  components: {
    UserAcatar,
    Pagination,
  },
  data() {
    return {
      students: [
        // 在students数组中添加学生数据
      ],
      course_assignment_list: [],
      tasks: ["作业1", "作业2", "作业3", "作业4", "作业5"],
      currentPage: 1,
      totalPages: 1,
      pageSize: 10,
      keyword: "",
      course_assignment_value: [],
      task: "",
      userInfo: "",
      assignment_list: [],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      loading: false,
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 6,
      },
    };
  },
  async mounted() {
    // const chart1 = echarts.init(document.getElementById("chart1"));

    // chart1.setOption({
    //   title: {
    //     text: "提交率",
    //     x: "center",
    //   },
    //   tooltip: {},
    //   series: [
    //     {
    //       name: "提交率",
    //       type: "pie",
    //       radius: ["55%"], // 修改radius参数，构造环形图
    //       labelLine: {
    //         show: false,
    //       },

    //       data: [
    //         { value: 335, name: "已提交" },
    //         { value: 310, name: "未提交" },
    //       ],
    //     },
    //   ],
    // });

    // // 初始化图表2
    // const chart2 = echarts.init(document.getElementById("chart2"));
    // chart2.setOption({
    //   title: {
    //     text: "提交率",
    //     x: "center",
    //   },
    //   tooltip: {},
    //   series: [
    //     {
    //       name: "提交率",
    //       type: "pie",
    //       radius: ["55%"], // 修改radius参数，构造环形图
    //       data: [
    //         { value: 335, name: "已提交" },
    //         { value: 310, name: "未提交" },
    //       ],
    //     },
    //   ],
    // });

    // // 初始化图表3
    // const chart3 = echarts.init(document.getElementById("chart3"));
    // chart3.setOption({
    //   title: {
    //     text: "提交率",
    //     x: "center",
    //   },
    //   tooltip: {},
    //   series: [
    //     {
    //       name: "提交率",
    //       type: "pie",
    //       radius: ["55%"], // 修改radius参数，构造环形图
    //       data: [
    //         { value: 335, name: "已提交" },
    //         { value: 310, name: "未提交" },
    //       ],
    //     },
    //   ],
    // });
    await this.fetchData();
  },
  methods: {
    editCorrection(item) {
      console.log(item);
      let obj = {};
      obj.student_assignment_id = item.student_assignment_id;
      obj.assignment_id = item.assignment_id;
      obj.student_correction_id = item.student_correction_id;
      obj.student_id = item.student_id;
      obj.status = "edit";
      obj.auth = "student_per"
      this.$router.push({ name: "Cabbage", query: { ...obj } });
    },
    // 跳转到作业详情
    async assignmentDecs(assignment_id, course_id, status) {
      // console.log(id);
      console.log(status);
      console.log(course_id);
      this.$router.push({
        name: "SubmitDetail",
        query: { assignment_id, course_id, status },
      });
    },
    pageChange(item) {
      console.log(item);
      this.fetchData(this.course_assignment_value[1], item);
    },
    async fetchData(assignment_id, pagechange) {
      this.loading = true;
      console.log(assignment_id);
      console.log(pagechange);
      let res;
      if (pagechange) {
        res = await this.$axios.post(
          "/correct/getStudentSubmit",
          { student_id: this.userInfo.student_id, assignmentId: assignment_id },
          { params: pagechange }
        );
      } else {
        res = await this.$axios.post(
          "/correct/getStudentSubmit",
          { student_id: this.userInfo.student_id, assignmentId: assignment_id },
          { params: this.listQuery }
        );
      }
      console.log(res);
      if (res.code == 200) {
        this.loading = false;
      }
      this.assignment_list = res.infoList;
      this.total = res.total;
    },
    // 点击批改作业按钮
    correctClick(item) {
      console.log(item);
      let obj = {};
      obj.student_assignment_id = item.student_assignment_id;
      obj.assignment_id = item.assignment_id;
      obj.student_correction_id = item.student_correction_id;
      obj.student_id = item.student_id;
      obj.status = "publish";
      obj.auth = "student_per";
      // console.log();
      this.$router.push({ name: "Cabbage", query: { ...obj } });
    },
    async handleChange() {
      await this.fetchData(this.course_assignment_value[1]);
    },
    findWork() {},
    changePage() {},
    async getCourse() {
      let res = await this.$axios.get("/correct/getStudentCourse");
      console.log(res);
      this.course_assignment_list = res.infoList;
    },
    gotoTargetPage() {
      this.$router.push({ name: "Cabbage" });
    },
    change(msg) {
      this.$emit("transfer", msg);
    },
    handleCommand(command) {
      this.course = command;
    },
    handleWork(command) {
      this.task = command;
    },
  },
  created() {
    console.log("123456");
    this.getCourse();
    this.userInfo = JSON.parse(JSON.stringify(store.state.user_info));
  },
  computed: {
    currentData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.students.slice(startIndex, endIndex);
    },
  },
};
</script>
<style scoped>
.assignmentInfor {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.studentInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
}
.content {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* min-height: 80vh; */
}
.item {
  width: 90%;
  margin: 20px;
  display: flex;
  /* justify-content: center; */
  flex-wrap: wrap;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
  color: #2376b7;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.sidebar-title {
  font-size: 18px;
  font-weight: bold;
  border: none;
}

.outer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.table-wrapper {
  flex-grow: 1;
  margin-right: 20px;
  width: 70%;
  float: left;
}

.page {
  margin-top: 20px;
}

.side-bar {
  width: 15%;
  background-color: #fff;
  border-radius: 4px;
  float: right;
}
.el-icon-search {
  color: #cceabb;
}
.look {
  background-color: #cceabb;
  color: #fff;
}
.center {
  display: flex;
  /* justify-content: center; */
  margin-left: 10px;
  margin-right: 10px;
}
.choice {
  margin-top: 10px;
}
.el-dropdown-link {
  display: flex;
  align-items: center;
}
.el-dropdown-link i {
  margin-left: 6px;
}
.search-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #bbb;
  height: 80px;
}
.se {
  margin: 0 auto;
}
.deadmenu {
  width: 100px;
  height: 100%;
  border: 1px solid black;
}
.avatar {
  float: right;
  margin-top: 20px;
}
.search {
  color: #cceabb;
  font-size: 18px;
  width: 300px;
  margin-left: 100px;
  margin-top: 20px;
}

.acatar {
  float: right;
  margin-right: 10px;
  margin-top: -10px;
}
.submitRate {
  width: 200px;
  height: 200px;
  /* border: 1px solid rgb(224, 224, 224); */
  margin: 30px;
  float: left;
}
.a1 {
  width: 900px;
  height: 240px;
  margin: 0 auto;
}
.i1 {
  padding: 20px 20px;
}
.main {
  margin: 0 auto;
  padding-top: 20px;
}
</style>